<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title></title>
    <link type="text/css" rel="stylesheet" href="${base}/templates/${config.theme}/mobile/css/style.css" />
    <script src="${base}/templates/${config.theme}/mobile/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var b = document.body.clientHeight;
            b = b - 90.8;
            $('.shoptypebox').css('height', b);

        })
    </script>
</head>

<body>
<div class="headerbox">
    <div class="header">
        <div class="headerC0">
            <div class="ssdiv">
                <input name="" type="text" placeholder="进口生鲜今日三折起售" />
                <a href="shoplist.html"><img src="${base}/templates/${config.theme}/mobile/images/ss.png" /></a>
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="hbox"></div>
<div class="shoptypebox">
    <div class="shtypeLeft">

            [@product_category_root_list count=15]
            <ul id="categoryList">
                [#list productCategories as cag]
                <li val="${cag.id}"><a href="javascript:;">${cag.name}</a></li>
                [/#list]
            </ul>
            [/@product_category_root_list]

    </div>
    <div class="shtypeRight">
        <div class="boxOne">
            <div class="box3">
                <ul class="ccbg">

                </ul>
            </div>

        </div>
    </div>
    <div class="clear"></div>
</div>

<div class="footbox">
    <div class="footer">
        <ul>
            <li>
                <a href="${base}/">
                    <img src="${base}/templates/${config.theme}/mobile/images/f01.png" />
                    <p>首页</p>
                </a>
            </li>
            <li class="on">
                <a href="${base}/category">
                    <img src="${base}/templates/${config.theme}/mobile/images/f2.png" />
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="${base}/cart/list">
                    <img src="${base}/templates/${config.theme}/mobile/images/f03.png" />
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="${base}/member">
                    <img src="${base}/templates/${config.theme}/mobile/images/f04.png" />
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </div>
</div>


<script>
    $("#categoryList li").click(function(){
        $(this).addClass("on").siblings().removeAttr("class");
        var cid = $(this).attr("val");
        getProductCategoryHtml(cid);
    });

    function getProductCategoryHtml(productCategoryId){
        //ajax
        $.ajax({
            url: "${base}/product/list/"+productCategoryId,
            cache: false,
            success: function(html){
                $('.ccbg').html(html);
            }
        });
    }

    //更新购物车数量
    function updateQuantity(productId,quantity){
        $.ajax("${base}/cart_item/update",
            {"productId":productId,"quantity":quantity,"type":1}, 'POST',null,'json',
            function(data){
                if(data.productQuantity<=0){
                    $("#reduceProduct_"+productId).css("display","none");
                    $("#productQuantity_"+productId).html("");
                    $("#cartQuantity").html(data.quantity);
                }else{
                    $("#productQuantity_"+productId).html(data.productQuantity);
                    $("#cartQuantity").html(data.quantity);
                }
            },
            function(data){
            });
    }

    function addProduct(productId){
        $("#reduceProduct_"+productId).css("display","");
        updateQuantity(productId,1);
    }

    function reduceProduct(productId){
        updateQuantity(productId,-1);
    }


    //热门更新购物车数量
    function hotUpdateQuantity(productId,quantity){
        $.ajax("${base}/cart_item/update",
            {"productId":productId,"quantity":quantity,"type":1}, 'POST',null,'json',
            function(data){
                if(data.productQuantity<=0){
                    $("#hotReduceProduct_"+productId).css("display","none");
                    $("#hotProductQuantity_"+productId).html("");
                    $("#cartQuantity").html(data.quantity);
                }else{
                    $("#hotProductQuantity_"+productId).html(data.productQuantity);
                    $("#cartQuantity").html(data.quantity);
                }
            },
            function(data){
            });
    }

    function hotAddProduct(productId){
        $("#hotReduceProduct_"+productId).css("display","");
        hotUpdateQuantity(productId,1);
    }

    function hotReduceProduct(productId){
        hotUpdateQuantity(productId,-1);
    }

    $(function(){
        getProductCategoryHtml(1);
        $("#categoryList li").eq(0).addClass("on").siblings().removeAttr("class");
        loadCart();
    })

    function fenlei(cid){
        $(".meunTab li").eq(1).click();
        if(cid==0){
            $(".category li").eq(0).click();
        }else {
            $(".category li[val="+cid+"]").click();
        }

    }

    function loadCart(){
        //ajax
        $.ajax("${base}/cart/view",null,'GET',null,'json',
            function(data){
                $("#cartQuantity").text(data.quantity);
            },
            function(data){
            });

    }
</script>

</body>

</html>